<div class="dropdown dropdown-end dropdown-hover block ">
  <div tabindex="0" role="button" class="btn btn-slide btn-sm btn-primary btn-ghost" aria-label="Change Theme">
    <%= icon_for(:theme) %>
    <span class="sliding-text"><span class="sliding-text-inner"><%= t('menu_items.theme') %></span></span>
  </div>
  <ul data-controller="theme-switcher" tabindex="-1" class="menu dropdown-content bg-base-100 rounded-box z-1 w-54 p-2 shadow-2xl">
    <li class="menu-title text-xs">Theme</li>
    <% TailwindTheme.all.each do |theme| %>
      <li>
        <a href="<%= update_preferences_profile_path(favorite_theme_key: theme.key) %>"
        data-theme-switcher-target="switchButton"
        data-turbo-method="patch" class="px-2 flex"
        data-action="click->theme-switcher#switchTheme"
        data-set-theme="<%= theme.key %>">
          <div data-theme="<%= theme.key %>" class="bg-base-100 grid shrink-0 grid-cols-2 gap-0.5 rounded-md p-1 shadow-sm"><div class="bg-base-content size-1 rounded-full"></div>
            <div class="bg-primary size-1 rounded-full"></div>
            <div class="bg-secondary size-1 rounded-full"></div>
            <div class="bg-accent size-1 rounded-full"></div>
          </div>
          <div class="w-32 truncate"><%= theme.name %></div>
          <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="currentColor" class="<%= theme.key == current_theme_key ? '' : 'invisible' %> h-3 w-3 shrink-0"><path d="M20.285 2l-11.285 11.567-5.286-5.011-3.714 3.716 9 8.728 15-15.285z"></path></svg>
        </a>
      </li>
    <% end %>
  </ul>
</div>